<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    
    <script>
        /*
            - JS中ajax(Async Javascript and XML)的原理是什么?如何实现
            - 原理:通过XNLHttpRequest对象来向服务器发送异步请求，从服务器获取数据，然后用js来操作DOM去更新页面/*
            - 实现过程：
                -创建Ajax的核心对象XMLHttpRequest对象
                    new XMLHttpRequest()实例化对象
                -通过XMLHttpRequest对象的open()方法与服务端建立连接
                    new XMLHttpRequest().open(method:表示请求方式，url:服务器的地址)
                -构建请求所需的数据内容，并通过XNLHttpRequest对象的send()方法发送给服务器端
                    new XMLHttpRequest().send(body:发送的数据)
                -通过 XMNLHttpRequest对象提供的 onreadystatechange事件监听服务器端的通信状态
                    new XNLHttpRequest().onreadystatechange主要监听的属性是实例化对象中readyState(五个状态)
                        0: open()未调用，
                        1: send()未调用，
                        2:send()已经调用，响应头和响应状态已经返回，
                        3:响应体正在下载，responseText(接收服务端响应的结果)获取到部分的数据,
                        4:整个请求过程已经完毕
                    只要readystate属性值发生了改变，onreadyStatechange被触发-接受并处理服务端向客户端响应的数据结果
                -将处理结果更新到HTML页面中
        */

        const xhr = new XMLHttpRequest();
        xhr.open('GET','./data.json',true);
        xhr.onreadystatechange = function(){
            if(xhr.readyState !==4 ) return;
            if(xhr.status >= 200 && xhr.status <300){
                console.log(this.response);
            }
        }
        xhr.send();
    </script>
</body>

</html>